<template>
  <div>
    <div class="app-container" style="padding: 0">
      <el-table
        border
        :data="tableData"
        @row-click="rowClick"
        header-cell-class-name="table-header"
        show-overflow-tooltip>
        <el-table-column
          label="序号"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="150"
          label="时间">
        </el-table-column>
        <el-table-column
          prop="targetLocationName"
          width="200"
          show-overflow-tooltip
          label="仓库">
        </el-table-column>
        <el-table-column
          prop="remark"
          show-overflow-tooltip
          label="跟踪信息">
        </el-table-column>
      </el-table>
      <div style="text-align: right;margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="amap-wrapper">
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        expandZoomRange="true"
        :zoom="zoom"
        :plugin="plugins"
        :pitch="66">
        <el-amap-marker
          v-for="(item,index) in marks"
          :key="index"
          :position="item.position"
          :label="item.label"
          :icon="centerIcon"/>
      </el-amap>
    </div>
  </div>
</template>

<script>
import { getEquipmentTrackList } from '@/api/common'

export default {
  name: 'EquipmentTrackComponent',
  props: {
    id: { type: String }
  },
  data() {
    return {
      zoom: 15,
      centerIcon: require('@/assets/images/logo.png'),
      center: [119.72899, 30.254775],
      marks: [],
      centerLabel: {
        content: '当前位置',
        offset: [-8, 36],
        direction: 'bottom'
      },
      plugins: [
        {
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 100, //超过10秒后停止定位，默认：无穷大
          maximumAge: 0, //定位结果缓存0毫秒，默认：0
          convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, //显示定位按钮，默认：true
          buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          extensions: 'all',
          // 地图定位按钮
          pName: 'Geolocation',
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              // console.log("result"+result)
              if (result && result.position) {
                self.lng = result.position.lng
                self.lat = result.position.lat
                self.center = [self.lng, self.lat]
                self.loaded = true
                self.$nextTick()
              }
            })
          }
        },
        {
          // 地图工具条
          pName: 'ToolBar',
          init(o) {
          }
        },
        {
          // 左下角缩略图插件 比例尺
          pName: 'Scale',
          init(o) {
          }
        }
      ],
      currentPage: 1,
      total: 0,
      pageSize: 5,
      tableData: []
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    handleSizeChange: function(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getTableData()
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getTableData()
    },
    rowClick(row, column, event) {
      this.center = [row.longitude, row.latitude]
    },
    getTableData() {
      // console.log('查询的ID：'+this.id);
      const param = { page: this.currentPage, rows: this.pageSize, equipmentId: this.id }
      getEquipmentTrackList(param).then(res => {
        this.tableData = res.resultData
        this.total = res.total
        if (this.tableData.length > 0) {
          this.marks = []
          this.tableData.forEach(item => {
            //console.log("经纬度："+item.longitude, item.latitude);
            if(item.longitude !=null && item.latitude !=null){
              //console.log("经纬度设置");
              this.marks.push({
                position: [item.longitude, item.latitude],
                equipmentId: item.equipmentId,
                label: {
                  content: item.targetLocationName == null ? "" : item.targetLocationName,
                  offset: [-8, 36],
                  direction: 'bottom'
                }
              })
            }
          })
        }
        //console.log("this.marks:"+JSON.stringify(this.marks));
        this.center = [this.marks[0].position[0], this.marks[0].position[1]]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.amap-wrapper {
  width: 100%;
  height: 450px;

  ::v-deep .amap-marker-label {
    position: absolute;
    z-index: 2;
    border: 0px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    cursor: default;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #fff;
  }

  ::v-deep .amap-icon img {
    width: 34px;
    height: 34px;
  }

  ::v-deep .amap-marker img {
    width: 34px;
    height: 34px;
  }
}

</style>
